<template>
  <el-select
      size="medium"
      class="w-full"
      ref="select"
      v-model="selectValue"
      v-bind="$attrs"
      @change="change"
  >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
import http from "network/http";
import ApiResponse from "utils/ApiResponse";

export default {
  name: "DictSelect" ,
  props:{
    props:{
      type: Object ,
      default(){
        return {
          label: 'label',
          value: 'value',
          disabled: false
        }
      }
    },
    url: {
      type: String ,
      required: true
    },
    dictKey: {
      type: String ,
      required: true
    },
    value: {
      type: [String , Number , Array] ,
      default: ""
    },
  },
  data(){
    return {
      options: []
    }
  },
  computed:{
    selectValue: {
      get(){
        return this.value
      },
      set(val){
        this.$emit("input",val)
      }
    }
  },
  mounted() {
    this.request()
  },
  methods:{
    change(el){
      console.log(el)
    },
      request(){
        http.post(`${this.url}/${this.dictKey}`).then(res=>{
          ApiResponse.init(res).ok(data=>{
            this.options = data.map(d=>{
              return {
                label: d[this.props.label] ,
                value: d[this.props.value],
                disabled: d[this.props.disabled] ,
                item: d
              }
            })
          })
        })
      }
  }
}
</script>

<style scoped>

</style>